<template>
  <div class="study-comp-box">
    <h1 @click="clickFunc">{{ msg }}</h1>
    <p>{{ collapseName }}</p>
    <p v-if="isFirstLevel" @click="getName">{{ compName }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';

// 组件声明
@Component({
  // props传值(方法一)
  props: {
    isFirstLevel: {
      type: Boolean,
      default: true
    }
  }
})
export default class HelloWorld extends Vue {
  /**
   * Prop 声明(方法二)：
   *  !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
   *  可以使用以下选项：type，default，required，validator
   * */
  @Prop() private msg!: string;

  /**
   * data 对象
  */
  private compName = "StudyComp组件";
  private isCollapse = false;

  /**
   * 生命周期函数
  */
  public created(): void {
    console.log("--created--");
    this.getName()
  }
  public mounted(): void {
    console.log("--mounted--");
  }

  /**
   * method方法
  */
  public clickFunc(): void {
    this.isCollapse = !this.isCollapse
  }

  /**
   * Watch 监听属性
   *  options 包含两个属性
   *    immediate?:boolean 侦听开始之后是否立即调用该回调函数
   *    deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数
  */
  @Watch("isCollapse", { immediate: true })
  private onIsCollapseChange(isCollapse: boolean) {
    console.log(isCollapse);
  }

  /**
   * computed 计算属性
  */
  public get collapseName(): string {
    return this.isCollapse ? '展开' : '收起';
  }

  /**
   * emit 事件
   * @Emit(event?: string)
   * 相当于getName() {
              this.$emit('get-name',  this.name)
          }
  */
  // 如果不声明getName就是get-name
  @Emit('getName')
  getName() {
    return { name: 'test'};
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.study-comp-box {
  h1 {
    cursor: pointer;
  }
}
</style>

